import React, { useState } from 'react'

import './index.less'

export default function Index() {
  const [active, setActive] = useState(0)
  const array = ['张三', '李四', '王五', '赵六', '赵琦']
  return (
    <div
      className='content'
    >
      {
        array.map((item, index) => {
          let boolean = index > 0 && (index - 1 === active - 1)
          return (
            <div
              key={index}
              className={
                `button ${active === index && 'active'} ${boolean && 'remove_right_color'}`
              }
              onClick={() => { setActive(index) }}
            >
              {item}
            </div>
          )
        })
      }
    </div>
  )
}
